<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- DOM是js的操作网页接口。它的作用是将网页转为一个js对象，从而可以用脚本进行各种操作 -->
    <!-- 节点：DOM的最小组成单位为节点，文档的树形结构（DOM树），就是有各种同类型的节点组成
         每个节点可以看做文档树的一片叶子
         节点的七种类型：
             Document：整个文档树的顶层节点
             DocumentType：doctype标签
             Element：网页的各种HTML标签
             Attribute：网页元素的属性
             Text：标签之间或标签包含的文本
             Comment：注释
             DocumentFragment：文档的片段
    -->
    <!-- document对象_方法/获取元素 -->
    <!-- getElementsByTagName:搜索HTML标签名 -->
    <div>Hello1</div>
    <div>Hello2</div>
    <!-- getgetElementsByClassName:搜索类名 -->
    <p class="text">hello</p>
    <!-- getElementsByName -->
    <form name="login"></form>
    <!--  -->
    <div id="root">你好亲</div>
    <!-- document.querySelector()方法接受一个css选择器作为参数，返回匹配该选择气的元素节点
         如果有多个节点满足匹配条件，则返回第一个匹配的节点，如果没有发现匹配节点，则返回null
    -->
    <div class="nav">nav1</div>
    <div class="nav">nav2</div>

    <!-- 创建元素 -->
    <div class="nav1">导航</div>
    <div id="container"></div>
    <script>
        console.log(document);

        if(document.nodeType===9){
            console.log("顶层节点");
        }

        var div1 = document.getElementsByTagName("div")[0];
        div1.innerHTML = "Hello World"

        var text = document.getElementsByClassName("text")[0];
        text.innerHTML = "Hello!"
        
        //使用率极低
        var name = document.getElementsByName("login");
        console.log(name);

        var root = document.getElementById("root");
        root.innerHTML = "hahaha";
        console.log(root);


        var nav = document.querySelector(".nav");
        console.log(nav);

        var navs = document.querySelectorAll(".nav")[1];
        console.log(navs);

        // 创建对象
        var text = document.createElement("p");
        var content = document.createTextNode("我是文本");
        var id = document.createAttribute("id");
        id.value = "root"
        //appendChild:将内容或者子元素放到容器中
        text.appendChild(content);
        //除了属性的插入需要用setAttributeNode，其余都用appendChild
        text.setAttributeNode(id);
        console.log(text);

        var container = document.getElementById("container");
        container.appendChild(text);


    </script>
</body>
</html>